<template>
  <div class="min-h-screen bg-light text-dark font-sans overflow-x-hidden">
    <Navbar />

    <!-- 招聘英雄区域 -->
    <section class="relative min-h-screen flex items-center pt-20 overflow-hidden careers-page">
      <!-- 背景 -->
      <div class="absolute inset-0 z-0 bg-gradient-to-br from-primary/5 via-white to-secondary/5 recruitment-hero-bg">
      </div>

      <div class="container mx-auto px-6 md:px-12 relative z-20 py-20">
        <div class="max-w-4xl mx-auto text-center recruitment-hero-content">
          <!-- 现代标签样式 -->
          <span class="inline-block px-6 py-2 rounded-full bg-primary/10 text-primary font-semibold text-sm mb-4 recruitment-hero-tag">
            加入我们
          </span>

          <!-- 现代标题设计 -->
          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-8 recruitment-hero-title">
            <!-- 第一行：优化文字效果 -->
            <div class="leading-tight">
              <span class="text-dark">与</span>
              <span class="text-secondary accent">同风起</span>
              <span class="text-dark">共创</span>
            </div>
            <!-- 第二行：数字化未来主题 -->
            <div class="text-dark leading-tight">
              数字化未来
            </div>
          </h1>

          <!-- 现代化副标题 -->
          <p class="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto mb-12 leading-relaxed recruitment-hero-description">
            我们正在寻找充满激情、富有创造力的人才，共同探索GEO与SEO搜索优化的前沿技术，
            为全球企业提供领先的搜索解决方案。
          </p>

          <!-- 行动按钮 -->
          <div class="flex flex-wrap justify-center gap-6 pt-4 recruitment-hero-buttons">
            <a href="#positions" class="px-10 py-4 text-white font-semibold rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 btn-pulse bg-secondary hover-lift">
              查看职位 <i class="fa fa-arrow-right ml-2"></i>
            </a>
            <a href="#culture" class="px-10 py-4 bg-primary/10 hover:bg-primary/20 text-primary border border-primary/30 font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 hover-lift">
              了解文化
            </a>
          </div>
        </div>
      </div>

      <!-- 向下滚动指示 -->
      <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 z-20 animate-bounce">
        <a href="#culture" class="text-primary/70 hover:text-primary transition-colors">
          <i class="fa fa-chevron-down text-2xl"></i>
        </a>
      </div>
    </section>

    <!-- 公司文化 -->
    <section id="culture" class="py-24 bg-gradient-to-b from-white to-gray-50 relative overflow-hidden">
      <!-- 装饰元素 -->
      <div class="absolute top-0 right-0 w-1/3 h-1/3 bg-primary/5 rounded-full -mr-20 -mt-20"></div>
      <div class="absolute bottom-0 left-0 w-1/4 h-1/4 bg-secondary/5 rounded-full -ml-20 -mb-20"></div>

      <div class="container mx-auto px-6 md:px-12 relative z-10">
        <div class="text-center max-w-3xl mx-auto mb-16">
          <span class="inline-block px-6 py-2 rounded-full bg-primary/10 text-primary font-semibold text-sm mb-4">
            我们的文化
          </span>
          <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
            融入<span class="text-secondary">创新文化</span>，成就卓越事业
          </h2>
          <p class="text-gray-600 text-lg">
            我们致力于营造一个开放、创新、协作的工作环境，让每位员工都能发挥最大潜力
          </p>
        </div>

        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
          <!-- 文化1 -->
          <div class="bg-white rounded-xl p-6 shadow-lg text-center hover:-translate-y-1 transition-all duration-300 border border-gray-100 group">
            <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4 relative overflow-hidden">
              <div class="absolute inset-0 bg-primary/20 transform scale-0 group-hover:scale-100 transition-transform duration-300 rounded-full"></div>
              <i class="fa fa-lightbulb-o text-primary text-2xl relative z-10"></i>
            </div>
            <h3 class="text-xl font-bold mb-3 text-dark group-hover:text-secondary transition-colors duration-300">创新驱动</h3>
            <p class="text-gray-600">
              鼓励员工探索新技术、新思路，持续推动搜索优化领域的创新
            </p>
          </div>

          <!-- 文化2 -->
          <div class="bg-white rounded-xl p-6 shadow-lg card-reveal text-center hover:-translate-y-1 transition-all duration-300 border border-gray-100 group" style="transition-delay: 0.1s">
            <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4 benefit-icon relative overflow-hidden">
              <div class="absolute inset-0 bg-primary/20 transform scale-0 group-hover:scale-100 transition-transform duration-300 rounded-full"></div>
              <i class="fa fa-users text-primary text-2xl relative z-10"></i>
            </div>
            <h3 class="text-xl font-bold mb-3 text-dark group-hover:text-secondary transition-colors duration-300">团队协作</h3>
            <p class="text-gray-600">
              扁平化管理结构，跨部门协作，共同解决复杂问题
            </p>
          </div>

          <!-- 文化3 -->
          <div class="bg-white rounded-xl p-6 shadow-lg card-reveal text-center hover:-translate-y-1 transition-all duration-300 border border-gray-100 group" style="transition-delay: 0.2s">
            <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4 benefit-icon relative overflow-hidden">
              <div class="absolute inset-0 bg-primary/20 transform scale-0 group-hover:scale-100 transition-transform duration-300 rounded-full"></div>
              <i class="fa fa-graduation-cap text-primary text-2xl relative z-10"></i>
            </div>
            <h3 class="text-xl font-bold mb-3 text-dark group-hover:text-secondary transition-colors duration-300">持续学习</h3>
            <p class="text-gray-600">
              提供丰富的学习资源和培训机会，支持员工职业发展
            </p>
          </div>

          <!-- 文化4 -->
          <div class="bg-white rounded-xl p-6 shadow-lg card-reveal text-center hover:-translate-y-1 transition-all duration-300 border border-gray-100 group" style="transition-delay: 0.3s">
            <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4 benefit-icon relative overflow-hidden">
              <div class="absolute inset-0 bg-primary/20 transform scale-0 group-hover:scale-100 transition-transform duration-300 rounded-full"></div>
              <i class="fa fa-heart text-primary text-2xl relative z-10"></i>
            </div>
            <h3 class="text-xl font-bold mb-3 text-dark group-hover:text-secondary transition-colors duration-300">工作生活平衡</h3>
            <p class="text-gray-600">
              弹性工作制，关注员工身心健康，创造健康的工作环境
            </p>
          </div>
        </div>

        <!-- 团队照片 -->
        <div class="grid md:grid-cols-2 gap-8 mb-24">
          <div class="rounded-2xl overflow-hidden shadow-xl relative group">
            <div class="absolute -inset-4 bg-gradient-to-r from-primary/20 to-secondary/20 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            <img src="https://picsum.photos/id/1060/800/600" alt="团队协作" class="w-full h-72 object-cover relative z-10 transform group-hover:scale-[1.02] transition-transform duration-300">
          </div>
          <div class="rounded-2xl overflow-hidden shadow-xl relative group" style="transition-delay: 0.2s">
            <div class="absolute -inset-4 bg-gradient-to-r from-primary/20 to-secondary/20 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            <img src="https://picsum.photos/id/1074/800/600" alt="公司活动" class="w-full h-72 object-cover relative z-10 transform group-hover:scale-[1.02] transition-transform duration-300">
          </div>
        </div>

        <!-- 价值观 -->
        <div class="relative">
          <div class="absolute inset-0 bg-gradient-to-r from-primary/5 to-secondary/5 rounded-3xl transform -rotate-1"></div>
          <div class="relative bg-white p-8 md:p-12 rounded-3xl shadow-xl card-reveal">
            <div class="text-center mb-8">
              <h3 class="text-2xl md:text-3xl font-bold mb-4">我们的价值观</h3>
              <p class="text-lg opacity-90">这些价值观指导我们如何工作、如何协作、如何成长</p>
            </div>
            <div class="grid md:grid-cols-3 gap-6">
              <div class="text-center group p-6 rounded-xl bg-gradient-to-br from-white to-gray-50 border border-gray-100 shadow-sm hover:shadow-md transition-all duration-300">
                <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-secondary/10 transition-colors duration-300">
                  <i class="fa fa-rocket text-2xl group-hover:text-secondary transition-colors duration-300"></i>
                </div>
                <h4 class="font-bold mb-2 text-lg group-hover:text-secondary transition-colors duration-300">追求卓越</h4>
                <p class="text-sm opacity-90">在技术和服务上不断追求更高标准</p>
              </div>
              <div class="text-center group p-6 rounded-xl bg-gradient-to-br from-white to-gray-50 border border-gray-100 shadow-sm hover:shadow-md transition-all duration-300">
                <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-secondary/10 transition-colors duration-300">
                  <i class="fa fa-handshake-o text-2xl group-hover:text-secondary transition-colors duration-300"></i>
                </div>
                <h4 class="font-bold mb-2 text-lg group-hover:text-secondary transition-colors duration-300">客户至上</h4>
                <p class="text-sm opacity-90">始终以客户需求和成功为出发点</p>
              </div>
              <div class="text-center group p-6 rounded-xl bg-gradient-to-br from-white to-gray-50 border border-gray-100 shadow-sm hover:shadow-md transition-all duration-300">
                <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-secondary/10 transition-colors duration-300">
                  <i class="fa fa-balance-scale text-2xl group-hover:text-secondary transition-colors duration-300"></i>
                </div>
                <h4 class="font-bold mb-2 text-lg group-hover:text-secondary transition-colors duration-300">诚信正直</h4>
                <p class="text-sm opacity-90">以最高的道德标准要求自己和团队</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 福利待遇 -->
    <section class="py-24 bg-white relative overflow-hidden">
      <div class="container mx-auto px-6 md:px-12 relative z-10">
        <div class="text-center max-w-3xl mx-auto mb-16">
          <span class="inline-block px-6 py-2 rounded-full bg-primary/10 text-primary font-semibold text-sm mb-4">
            福利待遇
          </span>
          <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
            我们为员工提供
          </h2>
          <p class="text-gray-600 text-lg">
            除了具有竞争力的薪酬，我们还提供一系列福利，确保员工在工作与生活之间找到最佳平衡
          </p>
        </div>

        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
          <!-- 福利1 -->
          <div class="bg-white rounded-xl p-6 card-reveal border border-gray-100 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1 group">
            <div class="w-12 h-12 bg-green-50 rounded-lg flex items-center justify-center mb-4 benefit-icon group-hover:bg-green-100 transition-colors duration-300">
              <i class="fa fa-money text-green-600 text-xl"></i>
            </div>
            <h3 class="text-xl font-bold mb-2 text-dark group-hover:text-secondary transition-colors duration-300">有竞争力的薪酬</h3>
            <p class="text-gray-600">行业领先的薪资水平，绩效奖金和年度调薪</p>
          </div>

          <!-- 福利2 -->
          <div class="bg-white rounded-xl p-6 card-reveal border border-gray-100 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1 group" style="transition-delay: 0.1s">
            <div class="w-12 h-12 bg-blue-50 rounded-lg flex items-center justify-center mb-4 benefit-icon group-hover:bg-blue-100 transition-colors duration-300">
              <i class="fa fa-medkit text-blue-600 text-xl"></i>
            </div>
            <h3 class="text-xl font-bold mb-2 text-dark group-hover:text-secondary transition-colors duration-300">健康保障</h3>
            <p class="text-gray-600">全面的医疗保险，年度体检，心理健康支持</p>
          </div>

          <!-- 福利3 -->
          <div class="bg-white rounded-xl p-6 card-reveal border border-gray-100 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1 group" style="transition-delay: 0.2s">
            <div class="w-12 h-12 bg-purple-50 rounded-lg flex items-center justify-center mb-4 benefit-icon group-hover:bg-purple-100 transition-colors duration-300">
              <i class="fa fa-graduation-cap text-purple-600 text-xl"></i>
            </div>
            <h3 class="text-xl font-bold mb-2 text-dark group-hover:text-secondary transition-colors duration-300">学习发展</h3>
            <p class="text-gray-600">培训预算，技术会议参与，内部知识分享</p>
          </div>

          <!-- 福利4 -->
          <div class="bg-white rounded-xl p-6 card-reveal border border-gray-100 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1 group" style="transition-delay: 0.3s">
            <div class="w-12 h-12 bg-yellow-50 rounded-lg flex items-center justify-center mb-4 benefit-icon group-hover:bg-yellow-100 transition-colors duration-300">
              <i class="fa fa-coffee text-yellow-600 text-xl"></i>
            </div>
            <h3 class="text-xl font-bold mb-2 text-dark group-hover:text-secondary transition-colors duration-300">休闲设施</h3>
            <p class="text-gray-600">休闲区，免费零食饮料，团队建设活动</p>
          </div>

          <!-- 福利5 -->
          <div class="bg-white rounded-xl p-6 card-reveal border border-gray-100 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1 group" style="transition-delay: 0.4s">
            <div class="w-12 h-12 bg-pink-50 rounded-lg flex items-center justify-center mb-4 benefit-icon group-hover:bg-pink-100 transition-colors duration-300">
              <i class="fa fa-plane text-pink-600 text-xl"></i>
            </div>
            <h3 class="text-xl font-bold mb-2 text-dark group-hover:text-secondary transition-colors duration-300">带薪休假</h3>
            <p class="text-gray-600">法定节假日，年假，带薪病假，额外福利假</p>
          </div>

          <!-- 福利6 -->
          <div class="bg-white rounded-xl p-6 card-reveal border border-gray-100 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1 group" style="transition-delay: 0.5s">
            <div class="w-12 h-12 bg-teal-50 rounded-lg flex items-center justify-center mb-4 benefit-icon group-hover:bg-teal-100 transition-colors duration-300">
              <i class="fa fa-home text-teal-600 text-xl"></i>
            </div>
            <h3 class="text-xl font-bold mb-2 text-dark group-hover:text-secondary transition-colors duration-300">灵活工作</h3>
            <p class="text-gray-600">弹性工作时间，部分岗位支持远程办公</p>
          </div>

          <!-- 福利7 -->
          <div class="bg-white rounded-xl p-6 card-reveal border border-gray-100 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1 group" style="transition-delay: 0.6s">
            <div class="w-12 h-12 bg-indigo-50 rounded-lg flex items-center justify-center mb-4 benefit-icon group-hover:bg-indigo-100 transition-colors duration-300">
              <i class="fa fa-child text-indigo-600 text-xl"></i>
            </div>
            <h3 class="text-xl font-bold mb-2 text-dark group-hover:text-secondary transition-colors duration-300">家庭关怀</h3>
            <p class="text-gray-600">育儿支持，家庭日活动，紧急家庭事务假</p>
          </div>

          <!-- 福利8 -->
          <div class="bg-white rounded-xl p-6 card-reveal border border-gray-100 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1 group" style="transition-delay: 0.7s">
            <div class="w-12 h-12 bg-red-50 rounded-lg flex items-center justify-center mb-4 benefit-icon group-hover:bg-red-100 transition-colors duration-300">
              <i class="fa fa-trophy text-red-600 text-xl"></i>
            </div>
            <h3 class="text-xl font-bold mb-2 text-dark group-hover:text-secondary transition-colors duration-300">股权激励</h3>
            <p class="text-gray-600">优秀员工股权激励计划，共享公司成长红利</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 开放职位 -->
    <section class="py-24 px-4 relative overflow-hidden" id="positions">
      <!-- 装饰背景元素 -->
      <div class="absolute inset-0 bg-gradient-to-br from-primary/5 via-white to-secondary/5 z-0"></div>
      <div class="absolute top-20 left-1/4 w-64 h-64 bg-primary/10 rounded-full filter blur-3xl opacity-70"></div>
      <div class="absolute bottom-20 right-1/4 w-80 h-80 bg-secondary/10 rounded-full filter blur-3xl opacity-70"></div>
      
      <div class="container mx-auto relative z-10">
        <div class="text-center mb-16">
          <span class="inline-block px-6 py-2 rounded-full bg-primary/10 text-primary font-semibold text-sm mb-4">
            职业机会
          </span>
          <h2 class="text-[clamp(2rem,5vw,3.5rem)] font-bold mb-6 text-dark">开放职位</h2>
          <p class="text-gray-600 text-lg max-w-2xl mx-auto">我们正在寻找优秀的人才加入团队，一起打造下一代AI智能科技产品，为企业提供创新的数字解决方案。</p>
        </div>

        <!-- 加载状态 -->
        <div v-if="isLoading" class="text-center py-16">
          <div class="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary mb-4"></div>
          <p class="text-gray-600">正在加载岗位信息...</p>
        </div>
        
        <!-- 错误状态 -->
        <div v-else-if="loadError" class="text-center py-16">
          <i class="fa fa-exclamation-circle text-red-500 text-5xl mb-4"></i>
          <p class="text-gray-600">{{ loadError }}</p>
          <button class="mt-4 px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors" @click="loadJobPostings">重新加载</button>
        </div>
        
        <!-- 无岗位状态 -->
        <div v-else-if="jobPostings.length === 0" class="text-center py-16">
          <i class="fa fa-briefcase text-gray-300 text-5xl mb-4"></i>
          <h3 class="text-xl font-medium text-gray-500 mb-2">暂无开放岗位</h3>
          <p class="text-gray-400">请稍后再访问，我们会定期更新岗位信息</p>
        </div>
        
        <!-- 动态岗位列表 - 网格布局 -->
        <div v-else class="max-w-6xl mx-auto">
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <div v-for="(job, index) in jobPostings" :key="job.id" class="bg-white rounded-2xl p-8 shadow-lg job-card card-reveal group cursor-pointer hover:shadow-xl transition-all duration-400 hover:-translate-y-2 transform origin-bottom" :style="{ transitionDelay: `${index * 0.08}s` }" @click="openJobModal(job)">
              <!-- 渐变边框效果 -->
              <div class="absolute -inset-0.5 bg-gradient-to-r from-primary/30 to-secondary/30 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-sm"></div>
              <!-- 卡片内容 -->
              <div class="relative">
                <!-- 职位标题 -->
                <h3 class="text-2xl font-bold mb-4 text-dark group-hover:text-secondary transition-colors duration-300">{{ job.title || '未命名职位' }}</h3>
                
                <!-- 职位标签 -->
                <div class="flex flex-wrap gap-3 mb-6">
                  <span class="px-3 py-1.5 bg-primary/10 text-primary text-sm font-medium rounded-full transition-all duration-300 group-hover:bg-primary/20">{{ job.category || '未分类' }}</span>
                  <span class="px-3 py-1.5 bg-secondary/10 text-secondary text-sm font-medium rounded-full transition-all duration-300 group-hover:bg-secondary/20">{{ job.type || '全职' }}</span>
                  <span class="px-3 py-1.5 bg-gray-100 text-gray-600 text-sm font-medium rounded-full transition-all duration-300 group-hover:bg-gray-200">{{ job.location || '未指定' }}</span>
                </div>
                
                <!-- 薪资信息 -->
                <div class="mb-6">
                  <span class="px-3 py-1.5 bg-secondary/10 text-secondary text-sm font-medium rounded-full">{{ job.salary || '薪资面议' }}</span>
                </div>
              
                <!-- 职位描述 -->
                <p v-if="job.description" class="text-gray-600 mb-6 text-base line-clamp-3 leading-relaxed">{{ job.description }}</p>
              
                <!-- 技术栈预览 -->
                <div v-if="job.tech_stack" class="mb-8">
                  <h4 class="text-sm font-medium text-gray-500 mb-3">技术栈</h4>
                  <div class="flex flex-wrap gap-2">
                    <span v-for="(tech, idx) in formatTechStack(job.tech_stack).slice(0, 3)" :key="idx" class="px-3 py-1.5 bg-gray-50 text-gray-700 text-sm font-medium rounded-full transition-all duration-300 group-hover:bg-gray-100">{{ tech }}</span>
                    <span v-if="formatTechStack(job.tech_stack).length > 3" class="px-3 py-1.5 bg-gray-50 text-gray-700 text-sm font-medium rounded-full transition-all duration-300 group-hover:bg-gray-100">+{{ formatTechStack(job.tech_stack).length - 3 }}</span>
                  </div>
                </div>
              
                <!-- 查看详情指示器和立即申请按钮 - 保持在卡片内部 -->
                <div class="flex items-center justify-between mt-8 pt-4 border-t border-gray-100">
                  <span class="text-sm font-medium text-primary flex items-center">
                    查看详情 <i class="fa fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform duration-300"></i>
                  </span>
                  <button
                      class="px-4 py-2.5 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg transition-all duration-300 apply-btn hover-lift transform group-hover:scale-105 relative z-10"
                      @click.stop="applyForPosition(job.title || '未命名职位')">
                    立即申请
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="text-center mt-16 max-w-2xl mx-auto">
        <p class="text-gray-500 text-lg">没有找到合适的职位？发送您的简历到 <a href="mailto:hr@windrise.cc" class="text-primary hover:underline font-medium transition-all duration-300 hover:text-secondary">hr@windrise.cc</a>，我们会保持联系</p>
      </div>
      </div>
    </section>

    <!-- 岗位详情模态框 - 带动画效果 -->
    <transition name="modal">
      <div v-if="showJobModal" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-start justify-center pt-28 pb-4 px-4" @click="closeJobModal">
        <div class="bg-white rounded-2xl shadow-2xl max-w-4xl w-full max-h-[calc(100vh-7rem)] overflow-y-auto transform modal-content" @click.stop>
          <div class="relative">
            <!-- 关闭按钮 - 优化样式和交互 -->
            <button class="absolute top-6 right-6 w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-gray-200 transition-all duration-300 z-10 hover:scale-110" @click="closeJobModal">
              <i class="fa fa-times text-lg"></i>
            </button>
            
            <div class="p-4 md:p-5">
              <!-- 岗位标题和基本信息 -->
              <div class="border-b border-gray-100 pb-4 mb-4">
                <h2 class="text-[clamp(1.2rem,3vw,1.6rem)] font-bold text-dark mb-3">{{ selectedJob?.title || '未命名职位' }}</h2>
                <div class="flex flex-wrap gap-3">
                  <span class="px-3 py-1.5 bg-primary/10 text-primary text-sm font-medium rounded-full hover:bg-primary/20 transition-all duration-300 cursor-pointer">{{ selectedJob?.category || '未分类' }}</span>
                  <span class="px-3 py-1.5 bg-secondary/10 text-secondary text-sm font-medium rounded-full hover:bg-secondary/20 transition-all duration-300 cursor-pointer">{{ selectedJob?.type || '全职' }}</span>
                  <span class="px-3 py-1.5 bg-gray-100 text-gray-600 text-sm font-medium rounded-full hover:bg-gray-200 transition-all duration-300 cursor-pointer">{{ selectedJob?.location || '未指定' }}</span>
                  <span class="px-3 py-1.5 bg-secondary/10 text-secondary text-sm font-medium rounded-full hover:bg-secondary/20 transition-all duration-300 cursor-pointer">{{ selectedJob?.salary || '薪资面议' }}</span>
                </div>
              </div>
              
              <!-- 岗位描述 -->
              <div v-if="selectedJob?.description" class="mb-4">
                <h3 class="text-base font-bold mb-1.5 text-dark">岗位描述</h3>
                <p class="text-gray-600 leading-relaxed">{{ selectedJob.description }}</p>
              </div>
              
              <!-- 岗位职责和要求 - 优化布局 -->
              <div class="grid md:grid-cols-2 gap-4 mb-4">
                <div class="bg-gray-50 p-4 rounded-lg">
                  <div class="w-6 h-6 bg-primary/10 rounded-full flex items-center justify-center mb-2">
                    <i class="fa fa-tasks text-primary text-xs"></i>
                  </div>
                  <h3 class="text-sm font-bold mb-2 text-dark">岗位职责</h3>
                  <ul v-if="selectedJob?.responsibilities" class="space-y-2 text-gray-600">
                    <li v-for="(responsibility, idx) in formatList(selectedJob.responsibilities)" :key="idx" class="flex items-start">
                      <i class="fa fa-check-circle text-secondary mt-0.5 mr-2"></i>
                      <span class="leading-relaxed">{{ responsibility }}</span>
                    </li>
                  </ul>
                  <p v-else class="text-gray-500 italic">暂无岗位职责信息</p>
                </div>
                <div class="bg-gray-50 p-4 rounded-lg">
                  <div class="w-6 h-6 bg-secondary/10 rounded-full flex items-center justify-center mb-2">
                    <i class="fa fa-user-circle text-secondary text-xs"></i>
                  </div>
                  <h3 class="text-sm font-bold mb-2 text-dark">任职要求</h3>
                  <ul v-if="selectedJob?.requirements" class="space-y-2 text-gray-600">
                    <li v-for="(requirement, idx) in formatList(selectedJob.requirements)" :key="idx" class="flex items-start">
                      <i class="fa fa-check-circle text-secondary mt-0.5 mr-2"></i>
                      <span class="leading-relaxed">{{ requirement }}</span>
                    </li>
                  </ul>
                  <p v-else class="text-gray-500 italic">暂无任职要求信息</p>
                </div>
              </div>
              
              <!-- 团队亮点 -->
              <div v-if="selectedJob?.highlights" class="mb-4 p-4 bg-gradient-to-r from-primary/5 to-secondary/5 rounded-lg border border-primary/10">
                <div class="flex items-center mb-1.5">
                  <div class="w-5 h-5 bg-primary/20 rounded-full flex items-center justify-center mr-1.5">
                    <i class="fa fa-star text-primary text-xs"></i>
                  </div>
                  <h3 class="text-sm font-bold text-primary">团队亮点</h3>
                </div>
                <p class="text-gray-700 leading-relaxed">{{ selectedJob.highlights }}</p>
              </div>
              
              <!-- 技术栈 -->
              <div v-if="selectedJob?.tech_stack" class="mb-4">
                <h3 class="text-sm font-bold mb-2 text-dark">技术栈</h3>
                <div class="flex flex-wrap gap-2">
                  <span v-for="(tech, idx) in formatTechStack(selectedJob.tech_stack)" :key="idx" class="px-3 py-1.5 bg-gray-50 text-gray-700 text-sm font-medium rounded-full transition-all duration-300 hover:bg-gray-100">{{ tech }}</span>
                </div>
              </div>
              
              <!-- 申请按钮 - 优化样式 -->
              <div class="flex justify-center pt-4 border-t border-gray-100">
                <button
                    class="px-5 py-2 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg transition-all duration-300 apply-btn hover-lift transform hover:scale-105 shadow-sm hover:shadow-md"
                    @click="applyForPosition(selectedJob?.title || '未命名职位')">
                  <i class="fa fa-paper-plane mr-1"></i> 立即申请
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <!-- 申请表单 -->
    <section id="contact" class="py-24 bg-white relative overflow-hidden">
      <!-- 装饰元素 -->
      <div class="absolute top-0 left-1/4 w-96 h-96 bg-primary/5 rounded-full -translate-y-1/2"></div>
      <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-secondary/5 rounded-full translate-y-1/2"></div>

      <div class="container mx-auto px-6 md:px-12 relative z-10">
        <div class="max-w-4xl mx-auto">
          <div class="text-center max-w-3xl mx-auto mb-16">
            <span class="inline-block px-6 py-2 rounded-full bg-primary/10 text-primary font-semibold text-sm mb-4">
              加入我们
            </span>
            <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
              申请职位
            </h2>
            <p class="text-gray-600 text-lg">
              填写以下表单，我们的招聘团队将在3个工作日内与您联系
            </p>
          </div>

          <div class="bg-white p-8 md:p-10 rounded-2xl shadow-xl card-reveal overflow-hidden relative">
            <!-- 装饰元素 -->
            <div class="absolute -top-24 -right-24 w-48 h-48 bg-primary/5 rounded-full"></div>
            <div class="absolute -bottom-16 -left-16 w-32 h-32 bg-secondary/5 rounded-full"></div>
            
            <form @submit.prevent="submitApplication" class="space-y-5 relative z-10">
                <!-- 错误信息显示 -->
                <div v-if="submitError" class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
                  <p>{{ submitError }}</p>
                </div>
                
                <div class="grid md:grid-cols-2 gap-5">
                  <div class="relative">
                    <label for="applicant-name" class="block text-gray-700 font-medium mb-1.5">姓名 <span class="text-red-500">*</span></label>
                    <div class="relative">
                      <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-gray-400">
                        <i class="fa fa-user"></i>
                      </span>
                      <input type="text" id="applicant-name" v-model="applicationForm.name"
                             class="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg outline-none transition-all duration-300 focus:ring-2 focus:ring-primary/30 focus:border-primary shadow-sm"
                             placeholder="请输入您的姓名" required/>
                    </div>
                  </div>

                  <div class="relative">
                    <label for="applicant-phone" class="block text-gray-700 font-medium mb-1.5">电话 <span class="text-red-500">*</span></label>
                    <div class="relative">
                      <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-gray-400">
                        <i class="fa fa-phone"></i>
                      </span>
                      <input type="tel" id="applicant-phone" v-model="applicationForm.phone"
                             class="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg outline-none transition-all duration-300 focus:ring-2 focus:ring-primary/30 focus:border-primary shadow-sm"
                             placeholder="请输入您的电话" required/>
                    </div>
                  </div>
                </div>

                <div class="relative">
                  <label for="applicant-email" class="block text-gray-700 font-medium mb-1.5">邮箱 <span class="text-red-500">*</span></label>
                  <div class="relative">
                    <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-gray-400">
                      <i class="fa fa-envelope"></i>
                    </span>
                    <input type="email" id="applicant-email" v-model="applicationForm.email"
                           class="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg outline-none transition-all duration-300 focus:ring-2 focus:ring-primary/30 focus:border-primary shadow-sm"
                           placeholder="请输入您的邮箱" required/>
                  </div>
                </div>

                <div class="relative">
                  <label for="applicant-position" class="block text-gray-700 font-medium mb-1.5">申请职位 <span class="text-red-500">*</span></label>
                  <div class="relative">
                    <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-gray-400">
                      <i class="fa fa-briefcase"></i>
                    </span>
                    <select id="applicant-position" v-model="applicationForm.position"
                            class="w-full pl-10 pr-10 py-2.5 border border-gray-300 rounded-lg outline-none transition-all duration-300 focus:ring-2 focus:ring-primary/30 focus:border-primary appearance-none bg-white shadow-sm"
                            required>
                      <option value="" disabled selected>请选择职位</option>
                      <option v-for="job in jobPostings" :key="job.id" :value="job.title">
                        {{ job.title || '未命名职位' }}
                      </option>
                      <option value="其他">其他</option>
                    </select>
                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-4 text-gray-500">
                      <i class="fa fa-chevron-down text-xs"></i>
                    </div>
                  </div>
                </div>

                <div class="relative">
                  <label for="applicant-experience" class="block text-gray-700 font-medium mb-1.5">工作经验</label>
                  <div class="relative">
                    <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-gray-400">
                      <i class="fa fa-clock-o"></i>
                    </span>
                    <select id="applicant-experience" v-model="applicationForm.experience"
                            class="w-full pl-10 pr-10 py-2.5 border border-gray-300 rounded-lg outline-none transition-all duration-300 focus:ring-2 focus:ring-primary/30 focus:border-primary appearance-none bg-white shadow-sm">
                      <option value="" selected>请选择工作经验</option>
                      <option value="应届毕业生">应届毕业生</option>
                      <option value="1-3年">1-3年</option>
                      <option value="3-5年">3-5年</option>
                      <option value="5-10年">5-10年</option>
                      <option value="10年以上">10年以上</option>
                    </select>
                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-4 text-gray-500">
                      <i class="fa fa-chevron-down text-xs"></i>
                    </div>
                  </div>
                </div>

                <div>
                  <label for="applicant-resume" class="block text-gray-700 font-medium mb-1.5">上传简历 <span class="text-red-500">*</span></label>
                  <div class="mt-1.5">
                    <input type="file" id="applicant-resume" ref="resumeInput" class="hidden" accept=".pdf,.doc,.docx"
                           @change="handleFileUpload" required/>
                    <label for="applicant-resume"
                           class="w-full flex items-center justify-center px-5 py-6 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 hover:border-primary transition-all duration-300 group">
                      <div class="text-center">
                        <i class="fa fa-file-text-o text-2xl text-gray-400 group-hover:text-primary mb-2 transition-colors duration-300"></i>
                        <p class="text-sm text-gray-600"><span class="font-medium text-primary hover:text-primary/80">点击上传简历</span> 或拖放文件到此处</p>
                        <p class="text-xs text-gray-500 mt-1">支持 PDF, DOC, DOCX 格式，文件大小不超过5MB</p>
                      </div>
                    </label>
                    <p class="mt-2 text-sm text-gray-500" v-if="resumeFileName && resumeFileName !== '选择文件'">
                      <i class="fa fa-check-circle text-green-500 mr-1"></i>
                      已选择: <span class="text-primary font-medium">{{ resumeFileName }}</span>
                    </p>
                  </div>
                </div>

                <div>
                  <label for="applicant-message" class="block text-gray-700 font-medium mb-1.5">个人简介</label>
                  <div class="relative">
                    <span class="absolute top-3 left-4 flex items-center text-gray-400">
                      <i class="fa fa-comment"></i>
                    </span>
                    <textarea id="applicant-message" rows="3" v-model="applicationForm.message"
                              class="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg outline-none transition-all duration-300 focus:ring-2 focus:ring-primary/30 focus:border-primary shadow-sm"
                              placeholder="请简要介绍您的专业背景、技能和职业规划"></textarea>
                  </div>
                </div>

                <button type="submit"
                        class="w-full bg-primary hover:bg-primary/90 text-white font-semibold py-3 px-6 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-0.5 hover-lift flex items-center justify-center gap-2"
                        :disabled="isSubmitting">
                  <span v-if="isSubmitting">
                    <i class="fa fa-circle-o-notch fa-spin"></i> 提交中...
                  </span>
                  <span v-else>
                    <i class="fa fa-paper-plane"></i> 提交申请
                  </span>
                </button>
                <p class="text-xs text-gray-500 mt-2 text-center">点击提交即表示您同意我们的<a href="#" class="text-primary hover:underline">隐私政策</a>和<a href="#" class="text-primary hover:underline">服务条款</a></p>
              </form>
          </div>
        </div>
      </div>
    </section>

    <Footer/>

    <!-- 成功提交弹窗 -->
    <SuccessModal
        :show="showSuccessModal"
        title="申请提交成功"
        message="感谢您的申请，我们的招聘团队将在3个工作日内与您联系"
        @close="showSuccessModal = false"
    />
  </div>
</template>

<script>
// 导入公司配置信息
import Navbar from '@/components/Navbar.vue'
import Footer from '@/components/Footer.vue'
import SuccessModal from '@/components/SuccessModal.vue'

export default {
  name: 'Careers',
  components: {
    Navbar,
    Footer,
    SuccessModal
  },
  data() {
    return {

      jobPostings: [],
      isLoading: false,
      loadError: null,
      applicationForm: {
        name: '',
        phone: '',
        email: '',
        position: '',
        experience: '',
        message: '',
        resume: null
      },
      resumeFileName: '选择文件',
      showSuccessModal: false,
      // 岗位详情模态框
      showJobModal: false,
      selectedJob: null,
      // 真实的简历提交状态和错误信息
      isSubmitting: false,
      submitError: ''
    }
  },
  mounted() {
    this.initAnimations()
    this.handleHashRouting()
    // 加载岗位数据
    this.loadJobPostings()
  },
  methods: {
    async loadJobPostings() {
      this.isLoading = true;
      this.loadError = null;
      
      try {
        // 使用环境变量或默认相对路径
        const apiUrl = import.meta.env.VITE_API_URL || '';
        const response = await fetch(`${apiUrl}/api/job-postings`);
        
        if (!response.ok) {
          throw new Error('加载岗位数据失败');
        }
        
        this.jobPostings = await response.json();
        // 只显示有效岗位
        this.jobPostings = this.jobPostings.filter(job => job.is_active !== false);
        
      } catch (error) {
        console.error('加载岗位失败:', error);
        this.loadError = error.message;
      } finally {
        this.isLoading = false;
      }
    },
    // 格式化职责和要求列表
    formatList(text) {
      if (!text) return [];
      return text.split('\n').filter(line => line.trim());
    },
    // 格式化技术栈为数组
    formatTechStack(text) {
      if (!text) return [];
      return text.split(',').map(tech => tech.trim()).filter(tech => tech);
    },
    initAnimations() {
      const animateOnScroll = () => {
        const elements = document.querySelectorAll('.card-reveal')
        elements.forEach(element => {
          const elementTop = element.getBoundingClientRect().top
          const elementVisible = 150
          if (elementTop < window.innerHeight - elementVisible) {
            element.classList.add('active')
          }
        })
      }
      window.addEventListener('scroll', animateOnScroll)
      animateOnScroll()
    },
    handleHashRouting() {
      if (this.$route.hash) {
        setTimeout(() => {
          const element = document.querySelector(this.$route.hash)
          if (element) {
            element.scrollIntoView({behavior: 'smooth'})
          }
        }, 100)
      }
    },
    // 打开岗位详情模态框
    openJobModal(job) {
      this.selectedJob = job
      this.showJobModal = true
      // 阻止背景滚动
      document.body.style.overflow = 'hidden'
    },
    
    // 关闭岗位详情模态框
    closeJobModal() {
      this.showJobModal = false
      this.selectedJob = null
      // 恢复背景滚动
      document.body.style.overflow = ''
    },
    
    // 立即申请按钮处理
    applyForPosition(position) {
      // 阻止任何可能的事件传播（额外保障）
      if (event && event.stopPropagation) {
        event.stopPropagation()
      }
      
      // 设置申请的职位
      this.applicationForm.position = position
      
      // 强制关闭岗位详情模态框（如果打开）
      this.showJobModal = false
      this.selectedJob = null
      document.body.style.overflow = ''
      
      // 立即执行滚动操作，无需延迟
      const contactSection = document.getElementById('contact')
      if (contactSection) {
        contactSection.scrollIntoView({
          behavior: 'smooth'
        })
      }
    },
    handleFileUpload(event) {
      const file = event.target.files[0]
      if (file) {
        // 文件类型验证
        const allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
        const allowedExtensions = ['.pdf', '.doc', '.docx'];
        const fileExtension = file.name.toLowerCase().substring(file.name.lastIndexOf('.'));
        
        // 文件大小验证（最大5MB）
        const maxSize = 5 * 1024 * 1024;
        
        if (!allowedTypes.includes(file.type) || !allowedExtensions.includes(fileExtension)) {
          alert('请上传PDF、DOC或DOCX格式的简历文件');
          event.target.value = ''; // 清除文件选择
          return;
        }
        
        if (file.size > maxSize) {
          alert('文件大小不能超过5MB');
          event.target.value = ''; // 清除文件选择
          return;
        }
        
        this.resumeFileName = file.name
        this.applicationForm.resume = file
      } else {
        this.resumeFileName = '选择文件'
        this.applicationForm.resume = null
      }
    },
    async submitApplication() {
      try {
        this.isSubmitting = true;
        // 模拟API请求
        await this.submitApplicationData(this.applicationForm)

        // 显示成功弹窗
        this.showSuccessModal = true

        // 重置表单
        this.applicationForm = {
          name: '',
          phone: '',
          email: '',
          position: '',
          experience: '',
          message: '',
          resume: null
        }
        this.resumeFileName = '选择文件'
        if (this.$refs.resumeInput) {
          this.$refs.resumeInput.value = ''
        }
      } catch (error) {
        console.error('提交失败:', error)
        // 显示更详细的错误信息
        alert(`提交失败: ${error.message}\n请查看浏览器控制台获取更多信息`)
      } finally {
        this.isSubmitting = false;
      }
    },
    // 实际表单提交到数据库的函数
    async submitApplicationData(data) {
      try {
        // 表单验证 - 增加trim处理
        if (!data.name || !data.name.trim() || !data.phone || !data.phone.trim() || !data.email || !data.email.trim() || !data.position || !data.position.trim() || !data.resume) {
          throw new Error('请填写所有必填字段，包括简历文件');
        }

        // 邮箱格式验证
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(data.email.trim())) {
          throw new Error('请输入有效的邮箱地址');
        }

        // 手机号格式验证
        const phoneRegex = /^1[3-9]\d{9}$/;
        if (!phoneRegex.test(data.phone.trim())) {
          throw new Error('请输入有效的手机号码');
        }

        console.log('开始执行职位申请提交');
        // 使用环境变量或默认URL，提高灵活性
        const apiUrl = import.meta.env.VITE_API_URL || '/api/job-application';
        console.log('准备发送请求到:', apiUrl);

        // 由于有文件上传，需要使用FormData - 添加trim处理防止前后空格
        const formData = new FormData();
        formData.append('name', data.name.trim());
        formData.append('email', data.email.trim());
        formData.append('phone', data.phone.trim());
        formData.append('position', data.position.trim());
        formData.append('experience', data.experience ? data.experience.trim() : '');
        formData.append('message', data.message ? data.message.trim() : '');
        
        // 添加简历文件
        if (data.resume) {
          // 再次验证文件（双重保障）
          const allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
          if (!allowedTypes.includes(data.resume.type)) {
            throw new Error('不支持的文件类型');
          }
          
          if (data.resume.size > 5 * 1024 * 1024) {
            throw new Error('文件大小超过限制');
          }
          
          formData.append('resume', data.resume);
          console.log('已添加简历文件:', data.resume.name);
        }

        console.log('正在发送fetch请求...');
        
        // 设置请求超时
        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), 30000); // 30秒超时
        
        try {
          // 发送真实的API请求，带超时控制
          const response = await fetch(apiUrl, {
            method: 'POST',
            credentials: 'include', // 允许跨域Cookie
            body: formData, // 不需要设置Content-Type，浏览器会自动设置
            mode: 'cors', // 添加mode以处理跨域
            signal: controller.signal // 添加信号控制
          });
          
          clearTimeout(timeoutId); // 清除超时定时器

          console.log('收到响应，状态码:', response.status);
          console.log('响应状态文本:', response.statusText);
          console.log('响应头:', Array.from(response.headers.entries()));
          
          // 获取Content-Type以确定响应类型
          const contentType = response.headers.get('content-type');
          console.log('响应Content-Type:', contentType);

          if (!response.ok) {
            // 尝试获取错误信息的多种方式
            let errorText = '';
            try {
              if (contentType && contentType.includes('application/json')) {
                const errorData = await response.json();
                errorText = errorData.error || errorData.message || JSON.stringify(errorData);
              } else {
                errorText = await response.text();
              }
            } catch (parseError) {
              console.error('解析错误响应失败:', parseError);
              errorText = '无法解析错误响应';
            }
            
            const errorMessage = `请求失败 (${response.status}): ${errorText}`;
            console.error('响应错误:', errorMessage);
            throw new Error(errorMessage);
          }

          console.log('响应正常，开始解析响应...');
          let result;
          
          try {
            // 根据响应类型解析结果
            if (contentType && contentType.includes('application/json')) {
              result = await response.json();
            } else {
              // 非JSON响应，获取原始文本
              const textResponse = await response.text();
              result = { success: true, data: textResponse, isTextResponse: true };
              console.log('收到非JSON响应，内容:', textResponse);
            }
          } catch (jsonError) {
            console.error('解析响应JSON失败:', jsonError);
            // 解析失败时获取原始文本
            const rawText = await response.text();
            console.log('原始响应文本:', rawText);
            throw new Error(`服务器返回的响应格式不正确: ${jsonError.message}`);
          }
          
          console.log('表单数据提交成功:', result);
          return result;
        } catch (timeoutError) {
          clearTimeout(timeoutId);
          if (timeoutError.name === 'AbortError') {
            throw new Error('请求超时，请稍后重试');
          }
          throw timeoutError;
        }
      } catch (error) {
        console.error('提交表单数据时发生错误:', error);
        throw error;
      }
    }
  }
}
</script>

<style scoped>
/* 基本样式已包含在全局样式中 */

/* 新增交互效果样式 */
@keyframes hoverLift {
  0% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-3px) scale(1.01);
  }
  100% {
    transform: translateY(-6px) scale(1.02);
  }
}

.hover-lift {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
  animation: hoverLift 0.4s ease-out forwards;
}

/* 招聘英雄区域装饰 */
.recruitment-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 50%, rgba(66, 153, 225, 0.05) 0%, rgba(66, 153, 225, 0) 70%);
  z-index: 0;
}

/* 渐变背景动画 */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.gradient-bg {
  background-size: 200% 200%;
  animation: gradientShift 15s ease infinite;
}

/* 平滑滚动 */
html {
  scroll-behavior: smooth;
}

/* 模态框动画 */
.modal-enter-active,
.modal-leave-active {
  transition: all 0.3s ease;
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}

.modal-enter-from .modal-content,
.modal-leave-to .modal-content {
  transform: scale(0.9) translateY(20px);
  opacity: 0;
}

.modal-content {
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* 卡片悬停效果增强 */
.job-card {
  position: relative;
  overflow: hidden;
}

.job-card::after {
  content: '';
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 60px;
  height: 60px;
  background: linear-gradient(45deg, rgba(66, 153, 225, 0.1), rgba(102, 126, 234, 0.1));
  border-radius: 50%;
  transition: all 0.5s ease;
  z-index: 0;
}

.job-card:hover::after {
  transform: scale(10);
  opacity: 0;
  transition: transform 0.7s ease, opacity 0.5s ease;
}

/* 标签悬停动画 */
.job-card span {
  transition: all 0.3s ease;
}

.job-card:hover span {
  transform: translateY(-2px);
}

/* 按钮脉冲效果 */
@keyframes btnPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(66, 153, 225, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(66, 153, 225, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(66, 153, 225, 0);
  }
}

.btn-pulse {
  animation: btnPulse 2s infinite;
}

/* 响应式调整 */
@media (max-width: 1024px) {
  .job-card {
    padding: 2rem;
  }
  
  .modal-content {
    margin: 1rem;
  }
}

@media (max-width: 768px) {
  #positions {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  
  .job-card {
    padding: 1.5rem;
  }
  
  .modal-content {
    margin: 0.5rem;
    max-height: 95vh;
  }
  
  .modal-content .p-8 {
    padding: 1.5rem;
  }
  
  /* 调整移动端网格布局 */
  .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: 1fr;
  }
  
  /* 调整职责和要求的布局 */
  .grid.md\:grid-cols-2 {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* 打印样式 */
@media print {
  .modal {
    display: none !important;
  }
  
  .job-card {
    break-inside: avoid;
  }
}
</style>